<template>
  <div class="system-settings-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <el-icon><Setting /></el-icon>
          系统设置
        </h1>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-content">
      <el-row :gutter="20">
        <!-- 左侧导航 -->
        <el-col :span="6">
          <el-card class="settings-nav">
            <el-menu
              :default-active="activeTab"
              @select="handleTabChange"
              class="settings-menu"
            >
              <el-menu-item index="general">
                <el-icon><Setting /></el-icon>
                <span>基本设置</span>
              </el-menu-item>
              <el-menu-item index="tickets">
                <el-icon><Document /></el-icon>
                <span>工单设置</span>
              </el-menu-item>
              <el-menu-item index="users">
                <el-icon><User /></el-icon>
                <span>用户设置</span>
              </el-menu-item>
              <el-menu-item index="notifications">
                <el-icon><Bell /></el-icon>
                <span>通知设置</span>
              </el-menu-item>
              <el-menu-item index="security">
                <el-icon><Lock /></el-icon>
                <span>安全设置</span>
              </el-menu-item>
              <el-menu-item index="integrations">
                <el-icon><Connection /></el-icon>
                <span>集成设置</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <!-- 右侧内容 -->
        <el-col :span="18">
          <!-- 基本设置 -->
          <el-card v-if="activeTab === 'general'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><Setting /></el-icon>
                <span>基本设置</span>
              </div>
            </template>
            
            <el-form :model="generalSettings" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="generalSettings.systemName" placeholder="请输入系统名称" />
              </el-form-item>
              <el-form-item label="系统描述">
                <el-input
                  v-model="generalSettings.systemDescription"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入系统描述"
                />
              </el-form-item>
              <el-form-item label="系统Logo">
                <el-upload
                  class="logo-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeLogoUpload"
                >
                  <img v-if="generalSettings.logoUrl" :src="generalSettings.logoUrl" class="logo" />
                  <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="时区设置">
                <el-select v-model="generalSettings.timezone" placeholder="请选择时区" style="width: 100%">
                  <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                  <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                  <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                  <el-option label="伦敦时间 (UTC+0)" value="Europe/London" />
                </el-select>
              </el-form-item>
              <el-form-item label="语言设置">
                <el-select v-model="generalSettings.language" placeholder="请选择语言" style="width: 100%">
                  <el-option label="简体中文" value="zh-CN" />
                  <el-option label="English" value="en-US" />
                  <el-option label="日本語" value="ja-JP" />
                </el-select>
              </el-form-item>
              <el-form-item label="主题设置">
                <el-radio-group v-model="generalSettings.theme">
                  <el-radio label="light">浅色主题</el-radio>
                  <el-radio label="dark">深色主题</el-radio>
                  <el-radio label="auto">跟随系统</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveGeneralSettings">保存设置</el-button>
              <el-button @click="resetGeneralSettings">重置</el-button>
            </div>
          </el-card>

          <!-- 工单设置 -->
          <el-card v-if="activeTab === 'tickets'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><Document /></el-icon>
                <span>工单设置</span>
              </div>
            </template>
            
            <el-form :model="ticketSettings" label-width="120px">
              <el-form-item label="工单编号前缀">
                <el-input v-model="ticketSettings.numberPrefix" placeholder="如：TK" />
              </el-form-item>
              <el-form-item label="工单编号格式">
                <el-input v-model="ticketSettings.numberFormat" placeholder="如：{prefix}-{year}-{number}" />
              </el-form-item>
              <el-form-item label="默认优先级">
                <el-select v-model="ticketSettings.defaultPriority" placeholder="请选择默认优先级" style="width: 100%">
                  <el-option label="高" value="HIGH" />
                  <el-option label="中" value="MEDIUM" />
                  <el-option label="低" value="LOW" />
                </el-select>
              </el-form-item>
              <el-form-item label="默认分类">
                <el-select v-model="ticketSettings.defaultCategory" placeholder="请选择默认分类" style="width: 100%">
                  <el-option label="技术问题" value="TECHNICAL" />
                  <el-option label="功能需求" value="FEATURE" />
                  <el-option label="Bug报告" value="BUG" />
                  <el-option label="其他" value="OTHER" />
                </el-select>
              </el-form-item>
              <el-form-item label="SLA响应时间">
                <el-input-number v-model="ticketSettings.slaResponseTime" :min="1" :max="168" />
                <span style="margin-left: 8px;">小时</span>
              </el-form-item>
              <el-form-item label="SLA解决时间">
                <el-input-number v-model="ticketSettings.slaResolutionTime" :min="1" :max="720" />
                <span style="margin-left: 8px;">小时</span>
              </el-form-item>
              <el-form-item label="自动关闭时间">
                <el-input-number v-model="ticketSettings.autoCloseTime" :min="0" :max="8760" />
                <span style="margin-left: 8px;">小时（0表示不自动关闭）</span>
              </el-form-item>
              <el-form-item label="允许客户关闭工单">
                <el-switch v-model="ticketSettings.allowCustomerClose" />
              </el-form-item>
              <el-form-item label="工单状态流程">
                <el-checkbox-group v-model="ticketSettings.statusFlow">
                  <el-checkbox value="OPEN">待处理</el-checkbox>
                  <el-checkbox value="IN_PROGRESS">处理中</el-checkbox>
                  <el-checkbox value="PENDING">挂起</el-checkbox>
                  <el-checkbox value="RESOLVED">已解决</el-checkbox>
                  <el-checkbox value="CLOSED">已关闭</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveTicketSettings">保存设置</el-button>
              <el-button @click="resetTicketSettings">重置</el-button>
            </div>
          </el-card>

          <!-- 用户设置 -->
          <el-card v-if="activeTab === 'users'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><User /></el-icon>
                <span>用户设置</span>
              </div>
            </template>
            
            <el-form :model="userSettings" label-width="120px">
              <el-form-item label="允许用户注册">
                <el-switch v-model="userSettings.allowRegistration" />
              </el-form-item>
              <el-form-item label="注册需要审核">
                <el-switch v-model="userSettings.requireApproval" />
              </el-form-item>
              <el-form-item label="默认用户角色">
                <el-select v-model="userSettings.defaultRole" placeholder="请选择默认角色" style="width: 100%">
                  <el-option label="客户" value="customer" />
                  <el-option label="客服" value="agent" />
                </el-select>
              </el-form-item>
              <el-form-item label="密码最小长度">
                <el-input-number v-model="userSettings.minPasswordLength" :min="6" :max="32" />
              </el-form-item>
              <el-form-item label="密码复杂度要求">
                <el-checkbox-group v-model="userSettings.passwordRequirements">
                  <el-checkbox value="uppercase">包含大写字母</el-checkbox>
                  <el-checkbox value="lowercase">包含小写字母</el-checkbox>
                  <el-checkbox value="numbers">包含数字</el-checkbox>
                  <el-checkbox value="symbols">包含特殊字符</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="会话超时时间">
                <el-input-number v-model="userSettings.sessionTimeout" :min="30" :max="1440" />
                <span style="margin-left: 8px;">分钟</span>
              </el-form-item>
              <el-form-item label="最大登录尝试次数">
                <el-input-number v-model="userSettings.maxLoginAttempts" :min="3" :max="10" />
              </el-form-item>
              <el-form-item label="账户锁定时间">
                <el-input-number v-model="userSettings.lockoutDuration" :min="5" :max="60" />
                <span style="margin-left: 8px;">分钟</span>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveUserSettings">保存设置</el-button>
              <el-button @click="resetUserSettings">重置</el-button>
            </div>
          </el-card>

          <!-- 通知设置 -->
          <el-card v-if="activeTab === 'notifications'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><Bell /></el-icon>
                <span>通知设置</span>
              </div>
            </template>
            
            <el-form :model="notificationSettings" label-width="120px">
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationSettings.emailEnabled" />
              </el-form-item>
              <el-form-item label="SMTP服务器" v-if="notificationSettings.emailEnabled">
                <el-input v-model="notificationSettings.smtpHost" placeholder="smtp.example.com" />
              </el-form-item>
              <el-form-item label="SMTP端口" v-if="notificationSettings.emailEnabled">
                <el-input-number v-model="notificationSettings.smtpPort" :min="1" :max="65535" />
              </el-form-item>
              <el-form-item label="SMTP用户名" v-if="notificationSettings.emailEnabled">
                <el-input v-model="notificationSettings.smtpUsername" placeholder="用户名" />
              </el-form-item>
              <el-form-item label="SMTP密码" v-if="notificationSettings.emailEnabled">
                <el-input v-model="notificationSettings.smtpPassword" type="password" placeholder="密码" />
              </el-form-item>
              <el-form-item label="短信通知">
                <el-switch v-model="notificationSettings.smsEnabled" />
              </el-form-item>
              <el-form-item label="短信API密钥" v-if="notificationSettings.smsEnabled">
                <el-input v-model="notificationSettings.smsApiKey" type="password" placeholder="API密钥" />
              </el-form-item>
              <el-form-item label="推送通知">
                <el-switch v-model="notificationSettings.pushEnabled" />
              </el-form-item>
              <el-form-item label="通知事件">
                <el-checkbox-group v-model="notificationSettings.notificationEvents">
                  <el-checkbox value="ticket_created">工单创建</el-checkbox>
                  <el-checkbox value="ticket_assigned">工单指派</el-checkbox>
                  <el-checkbox value="ticket_updated">工单更新</el-checkbox>
                  <el-checkbox value="ticket_resolved">工单解决</el-checkbox>
                  <el-checkbox value="ticket_closed">工单关闭</el-checkbox>
                  <el-checkbox value="comment_added">评论添加</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
              <el-button @click="testNotification">测试通知</el-button>
              <el-button @click="resetNotificationSettings">重置</el-button>
            </div>
          </el-card>

          <!-- 安全设置 -->
          <el-card v-if="activeTab === 'security'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><Lock /></el-icon>
                <span>安全设置</span>
              </div>
            </template>
            
            <el-form :model="securitySettings" label-width="120px">
              <el-form-item label="启用HTTPS">
                <el-switch v-model="securitySettings.httpsEnabled" />
              </el-form-item>
              <el-form-item label="强制HTTPS">
                <el-switch v-model="securitySettings.forceHttps" />
              </el-form-item>
              <el-form-item label="JWT密钥">
                <el-input v-model="securitySettings.jwtSecret" type="password" placeholder="JWT密钥" />
                <el-button @click="generateJwtSecret" style="margin-left: 8px;">生成新密钥</el-button>
              </el-form-item>
              <el-form-item label="JWT过期时间">
                <el-input-number v-model="securitySettings.jwtExpiration" :min="1" :max="1440" />
                <span style="margin-left: 8px;">分钟</span>
              </el-form-item>
              <el-form-item label="启用CORS">
                <el-switch v-model="securitySettings.corsEnabled" />
              </el-form-item>
              <el-form-item label="CORS域名" v-if="securitySettings.corsEnabled">
                <el-input v-model="securitySettings.corsOrigins" placeholder="允许的域名，用逗号分隔" />
              </el-form-item>
              <el-form-item label="启用API限流">
                <el-switch v-model="securitySettings.rateLimitEnabled" />
              </el-form-item>
              <el-form-item label="API限流次数" v-if="securitySettings.rateLimitEnabled">
                <el-input-number v-model="securitySettings.rateLimitRequests" :min="10" :max="1000" />
                <span style="margin-left: 8px;">次/分钟</span>
              </el-form-item>
              <el-form-item label="启用IP白名单">
                <el-switch v-model="securitySettings.ipWhitelistEnabled" />
              </el-form-item>
              <el-form-item label="IP白名单" v-if="securitySettings.ipWhitelistEnabled">
                <el-input v-model="securitySettings.ipWhitelist" placeholder="允许的IP地址，用逗号分隔" />
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
              <el-button @click="resetSecuritySettings">重置</el-button>
            </div>
          </el-card>

          <!-- 集成设置 -->
          <el-card v-if="activeTab === 'integrations'" class="settings-panel">
            <template #header>
              <div class="panel-header">
                <el-icon><Connection /></el-icon>
                <span>集成设置</span>
              </div>
            </template>
            
            <el-form :model="integrationSettings" label-width="120px">
              <el-form-item label="LDAP集成">
                <el-switch v-model="integrationSettings.ldapEnabled" />
              </el-form-item>
              <el-form-item label="LDAP服务器" v-if="integrationSettings.ldapEnabled">
                <el-input v-model="integrationSettings.ldapHost" placeholder="ldap.example.com" />
              </el-form-item>
              <el-form-item label="LDAP端口" v-if="integrationSettings.ldapEnabled">
                <el-input-number v-model="integrationSettings.ldapPort" :min="1" :max="65535" />
              </el-form-item>
              <el-form-item label="LDAP基础DN" v-if="integrationSettings.ldapEnabled">
                <el-input v-model="integrationSettings.ldapBaseDn" placeholder="dc=example,dc=com" />
              </el-form-item>
              <el-form-item label="GitHub集成">
                <el-switch v-model="integrationSettings.githubEnabled" />
              </el-form-item>
              <el-form-item label="GitHub Client ID" v-if="integrationSettings.githubEnabled">
                <el-input v-model="integrationSettings.githubClientId" placeholder="Client ID" />
              </el-form-item>
              <el-form-item label="GitHub Client Secret" v-if="integrationSettings.githubEnabled">
                <el-input v-model="integrationSettings.githubClientSecret" type="password" placeholder="Client Secret" />
              </el-form-item>
              <el-form-item label="Slack集成">
                <el-switch v-model="integrationSettings.slackEnabled" />
              </el-form-item>
              <el-form-item label="Slack Webhook URL" v-if="integrationSettings.slackEnabled">
                <el-input v-model="integrationSettings.slackWebhookUrl" placeholder="https://hooks.slack.com/..." />
              </el-form-item>
              <el-form-item label="钉钉集成">
                <el-switch v-model="integrationSettings.dingtalkEnabled" />
              </el-form-item>
              <el-form-item label="钉钉Webhook URL" v-if="integrationSettings.dingtalkEnabled">
                <el-input v-model="integrationSettings.dingtalkWebhookUrl" placeholder="https://oapi.dingtalk.com/..." />
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <el-button type="primary" @click="saveIntegrationSettings">保存设置</el-button>
              <el-button @click="testIntegration">测试连接</el-button>
              <el-button @click="resetIntegrationSettings">重置</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Setting, Document, User, Bell, Lock, Connection, Plus
} from '@element-plus/icons-vue'

export default {
  name: 'SystemSettings',
  components: {
    Setting, Document, User, Bell, Lock, Connection, Plus
  },
  setup() {
    const activeTab = ref('general')
    const loading = ref(false)

    // 基本设置
    const generalSettings = reactive({
      systemName: '工单管理系统',
      systemDescription: '基于Vue 3 + Spring Boot构建的现代化工单管理平台',
      logoUrl: '',
      timezone: 'Asia/Shanghai',
      language: 'zh-CN',
      theme: 'auto'
    })

    // 工单设置
    const ticketSettings = reactive({
      numberPrefix: 'TK',
      numberFormat: '{prefix}-{year}-{number}',
      defaultPriority: 'MEDIUM',
      defaultCategory: 'OTHER',
      slaResponseTime: 24,
      slaResolutionTime: 72,
      autoCloseTime: 168,
      allowCustomerClose: true,
      statusFlow: ['OPEN', 'IN_PROGRESS', 'PENDING', 'RESOLVED', 'CLOSED']
    })

    // 用户设置
    const userSettings = reactive({
      allowRegistration: true,
      requireApproval: false,
      defaultRole: 'customer',
      minPasswordLength: 8,
      passwordRequirements: ['lowercase', 'numbers'],
      sessionTimeout: 480,
      maxLoginAttempts: 5,
      lockoutDuration: 15
    })

    // 通知设置
    const notificationSettings = reactive({
      emailEnabled: false,
      smtpHost: '',
      smtpPort: 587,
      smtpUsername: '',
      smtpPassword: '',
      smsEnabled: false,
      smsApiKey: '',
      pushEnabled: true,
      notificationEvents: ['ticket_created', 'ticket_assigned', 'ticket_updated']
    })

    // 安全设置
    const securitySettings = reactive({
      httpsEnabled: false,
      forceHttps: false,
      jwtSecret: '',
      jwtExpiration: 480,
      corsEnabled: true,
      corsOrigins: '*',
      rateLimitEnabled: true,
      rateLimitRequests: 100,
      ipWhitelistEnabled: false,
      ipWhitelist: ''
    })

    // 集成设置
    const integrationSettings = reactive({
      ldapEnabled: false,
      ldapHost: '',
      ldapPort: 389,
      ldapBaseDn: '',
      githubEnabled: false,
      githubClientId: '',
      githubClientSecret: '',
      slackEnabled: false,
      slackWebhookUrl: '',
      dingtalkEnabled: false,
      dingtalkWebhookUrl: ''
    })

    // 方法
    const handleTabChange = (tab) => {
      activeTab.value = tab
    }

    const beforeLogoUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    }

    const saveGeneralSettings = async () => {
      try {
        loading.value = true
        // 这里调用API保存设置
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('基本设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const resetGeneralSettings = () => {
      Object.assign(generalSettings, {
        systemName: '工单管理系统',
        systemDescription: '基于Vue 3 + Spring Boot构建的现代化工单管理平台',
        logoUrl: '',
        timezone: 'Asia/Shanghai',
        language: 'zh-CN',
        theme: 'auto'
      })
      ElMessage.info('已重置为默认设置')
    }

    const saveTicketSettings = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('工单设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const resetTicketSettings = () => {
      Object.assign(ticketSettings, {
        numberPrefix: 'TK',
        numberFormat: '{prefix}-{year}-{number}',
        defaultPriority: 'MEDIUM',
        defaultCategory: 'OTHER',
        slaResponseTime: 24,
        slaResolutionTime: 72,
        autoCloseTime: 168,
        allowCustomerClose: true,
        statusFlow: ['OPEN', 'IN_PROGRESS', 'PENDING', 'RESOLVED', 'CLOSED']
      })
      ElMessage.info('已重置为默认设置')
    }

    const saveUserSettings = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('用户设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const resetUserSettings = () => {
      Object.assign(userSettings, {
        allowRegistration: true,
        requireApproval: false,
        defaultRole: 'customer',
        minPasswordLength: 8,
        passwordRequirements: ['lowercase', 'numbers'],
        sessionTimeout: 480,
        maxLoginAttempts: 5,
        lockoutDuration: 15
      })
      ElMessage.info('已重置为默认设置')
    }

    const saveNotificationSettings = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('通知设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const testNotification = async () => {
      try {
        await ElMessageBox.confirm('确定要发送测试通知吗？', '确认测试', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('测试通知发送成功')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('测试失败：' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    const resetNotificationSettings = () => {
      Object.assign(notificationSettings, {
        emailEnabled: false,
        smtpHost: '',
        smtpPort: 587,
        smtpUsername: '',
        smtpPassword: '',
        smsEnabled: false,
        smsApiKey: '',
        pushEnabled: true,
        notificationEvents: ['ticket_created', 'ticket_assigned', 'ticket_updated']
      })
      ElMessage.info('已重置为默认设置')
    }

    const saveSecuritySettings = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('安全设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const generateJwtSecret = () => {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      let result = ''
      for (let i = 0; i < 32; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      securitySettings.jwtSecret = result
      ElMessage.success('JWT密钥已生成')
    }

    const resetSecuritySettings = () => {
      Object.assign(securitySettings, {
        httpsEnabled: false,
        forceHttps: false,
        jwtSecret: '',
        jwtExpiration: 480,
        corsEnabled: true,
        corsOrigins: '*',
        rateLimitEnabled: true,
        rateLimitRequests: 100,
        ipWhitelistEnabled: false,
        ipWhitelist: ''
      })
      ElMessage.info('已重置为默认设置')
    }

    const saveIntegrationSettings = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('集成设置保存成功')
      } catch (error) {
        ElMessage.error('保存失败：' + error.message)
      } finally {
        loading.value = false
      }
    }

    const testIntegration = async () => {
      try {
        await ElMessageBox.confirm('确定要测试集成连接吗？', '确认测试', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 2000))
        ElMessage.success('集成连接测试成功')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('测试失败：' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    const resetIntegrationSettings = () => {
      Object.assign(integrationSettings, {
        ldapEnabled: false,
        ldapHost: '',
        ldapPort: 389,
        ldapBaseDn: '',
        githubEnabled: false,
        githubClientId: '',
        githubClientSecret: '',
        slackEnabled: false,
        slackWebhookUrl: '',
        dingtalkEnabled: false,
        dingtalkWebhookUrl: ''
      })
      ElMessage.info('已重置为默认设置')
    }

    // 生命周期
    onMounted(() => {
      // 加载设置数据
      console.log('系统设置页面已加载')
    })

    return {
      activeTab,
      loading,
      generalSettings,
      ticketSettings,
      userSettings,
      notificationSettings,
      securitySettings,
      integrationSettings,
      handleTabChange,
      beforeLogoUpload,
      saveGeneralSettings,
      resetGeneralSettings,
      saveTicketSettings,
      resetTicketSettings,
      saveUserSettings,
      resetUserSettings,
      saveNotificationSettings,
      testNotification,
      resetNotificationSettings,
      saveSecuritySettings,
      generateJwtSecret,
      resetSecuritySettings,
      saveIntegrationSettings,
      testIntegration,
      resetIntegrationSettings
    }
  }
}
</script>

<style scoped>
.system-settings-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.settings-content {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-nav {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-menu {
  border: none;
}

.settings-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin-bottom: 4px;
  border-radius: 8px;
}

.settings-menu :deep(.el-menu-item:hover) {
  background-color: #f0f9ff !important;
  color: #409eff !important;
}

.settings-menu :deep(.el-menu-item.is-active) {
  background-color: #409eff !important;
  color: white !important;
  font-weight: 500;
}

.settings-menu :deep(.el-menu-item.is-active .el-icon),
.settings-menu :deep(.el-menu-item.is-active span) {
  color: white !important;
}

.settings-panel {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.logo {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.form-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .system-settings-container {
    padding: 12px;
  }
  
  .settings-content .el-col:first-child {
    margin-bottom: 20px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .el-button {
    width: 100%;
  }
}
</style>
